﻿    @{
        ViewBag.Title = "Pencas Olimarudo - Posiciones";
    int i = 1;
}

<div class="medium-10 large-8 large-offset-1 columns tablaPosiciones" >

    <div class="row">        
        @if (ViewBag.MiPosicion != null)
        {
            <div class="small-12 columns" style="margin-bottom: 15px; font-weight: bold">Mi posición: @ViewBag.MiPosicion</div>
        }        
    </div>
         
    <div class="row">   
        <div class="small-12 columns">
            <table>
                <col width="70px">
                <col>
                <col width="100px">
                <tr>
                    <td>
                        #
                    </td>
                    <td>
                        Jugador
                    </td>
                    <td>
                        Puntos
                    </td>
                </tr>
                @foreach (string[] row in ViewBag.Posiciones)
                {
                    <tr class="rowPosiciones">
                        <td>
                            @i
                        </td>
                        <td>
                            @row[1]
                        </td>
                        <td>
                            @row[2]
                        </td>
                        <td class="celdaIdUsuario" style="display:none">@row[0]</td>
                        </tr>
                    i++;
                }
                    
            </table>
        </div>
    </div>

    <div class="row">
        <div id="pagination" class="small-12 small-centered columns pagination"></div> 
    </div>   
         
</div>

            @*<div id="popupPronostico" style="display:none"></div>*@
            <div id="pronosticoLoaderDiv" style="display:none"><img id="pronosticoLoader" src="@Url.Content("Content/img/ajax-loader-big.gif")" height="128px" width="128px"/></div>

            <a id="showModal" style="display:none" href="#" data-reveal-id="myModal">Click Me For A Modal</a>
            <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
                 <iframe id="iframePronostico" src="" width='100%' height='440px' frameBorder="0" onload='iframeLoad()'></iframe>
                 <a class="close-reveal-modal" aria-label="Close">×</a>
            </div>

<script type="text/javascript">
    function positionPopup() {
//        $("#popupPronostico, #pronosticoLoaderDiv").css("left", ($(window).width() / 2 - $("#popupPronostico").width() / 2) + "px");
//        $("#popupPronostico, #pronosticoLoaderDiv").css("top", ($(window).height() / 2 - $("#popupPronostico").height() / 2) + "px");
    }

    function iframeLoad() {
//        $("#pronosticoLoaderDiv").hide();
//        $("#popupPronostico").show();
    }

    function pageselectCallback(page_index) {
        //El valor 15 viene del plug in jqueryPagination, items_per_page:15
        $(".tablaPosiciones tr").not(":first").hide();
        $(".tablaPosiciones tr").not(":first").slice(page_index * 15, page_index * 15 + 15).show();

        return false;
    }

    $(document).ready(function () {
        $("#menu-bar li").removeClass("active");
        $(".liPosiciones").addClass("active");

        var email = '@Session["email"]';
        setEmail(email);

        $(".rowPosiciones").click(function () {
            positionPopup();
            var celdaUsuario = $(this).children().first().nextAll(".celdaIdUsuario");
            var idUsuario = $(celdaUsuario).html().trim();
            //            $("#pronosticoLoaderDiv").show();
            $("#iframePronostico").attr("src", "Partidos/ObtenerPronostico?userId=" + idUsuario);
            $("#showModal").click();
            //            $("#popupPronostico").append("<iframe src='Partidos/ObtenerPronostico?userId=" + idUsuario + "' width='100%' height='440px' onload='iframeLoad()'></iframe>");
        });

        $("body").keyup(function (e) {
            if (e.keyCode == 27) {
                if ($(".close-reveal-modal").is(":visible")) {
                    $(".close-reveal-modal").click();
                }
            }
        });

        $("#pronosticoLoader").css("margin-left", ($("#pronosticoLoaderDiv").width() / 2 - $("#pronosticoLoader").width() / 2) + "px");
        $("#pronosticoLoader").css("margin-top", ($("#pronosticoLoaderDiv").height() / 2 - $("#pronosticoLoader").height() / 2) + "px");
        positionPopup();

        $("#pagination").pagination($(".tablaPosiciones tr").length - 1, { callback: pageselectCallback });
    });
</script>